<template>
<div class="wrapper">
  <head title="Review"></head>
  <div v-for="(listLi,liIndex) in list" :key="liIndex">
    <div class="order_top">
      <image class="googPic" :src="listLi.thumb" />
      <div class="goods_info">
        <text class="goods_title">{{listLi.title}}</text>
        <div class="goods_spec">
          <text class="priceInfo">{{listLi.goods_option}}</text>
          <text class="specInfo">{{listLi.number}}</text>
        </div>
      </div>
    </div>
    <view class="star-box">
      <image
        class="image"
        v-for="(item,index) in 5"
        :key="index"
        :src="(index+1)>listLi.star_score?starDefault:starActive" 
        @click="listLi.star_score=index+1"
      />
    </view>
    <div class="selBox">
      <textarea class="textarea" v-model="listLi.message"></textarea>
      <div class="imgBox">
        <image
          v-if="listLi.imgList.length>0"
          class="clickPhoto reviewImg"
          resize="contain"
          v-for="(item,index) in listLi.imgList"
          :key="index"
          :src="item.file_url"
        />
        <image
          @click="pickPhoto(listLi)"
          class="clickPhoto"
          resize="contain"
          src="root:img/photo.png"
        />
      </div>
    </div>
  </div>
  <text class="sureBtn" @click="confirm">Submit</text>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template> 
<script>
const photo = weex.requireModule("photo");
import asCore from "../../../mixin/core";
import {
  upload,
  add_evaluation,
  get_order_co_info
} from "../../../mixin/ajax.js";
export default {
  data() {
    return {
      starDefault: "root:img/evaluation/st_star.png",
      starActive: "root:img/evaluation/st_star_active.png.png",
      userId: "",
      orderId: "",
      list: [],
      message: "",
      score: "",
      imgList: []
    };
  },
  methods: {
    onLoad(param) {
      let type = 0;
      if (param && param.id) {
        this.orderId = param.id;
      }
      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getOrderDetail();
      });
    },
    getOrderDetail() {
      get_order_co_info(
        { users_id: this.userId, co_order_id: this.orderId },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              this.list = res.data.list;
              this.list.forEach(item => {
                this.$set(item, "message", "");
                this.$set(item, "imgList", []);
              });
            }
          }
        }
      );
    },
    confirm() {
      let that = this;
      that.list.forEach(item => {
        if (!item.message) {
          that.alert("Enter message");
        }
      });
      let eva = that.list.map(item => {
        return {
          order_id: item.id,
          goods_id: item.goods_id,
          option_id: item.option_id,
          message: item.message,
          star_score: item.star_score,
          file: item.imgList
        };
      });
      add_evaluation(
        { users_id: this.userId, co_order_id: this.orderId, eva: eva },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            if (res.code == 200) {
              setTimeout(() => {
                that.back();
              }, 2000);
            }
          }
        }
      );
    },
    pickPhoto(list) {
      var self = this;
      photo.open(800, 800, "#000000", "#ffffff", "#ffffff", function(e) {
        self.src = e.path;
        upload({ type: 0, file: e.path }, res => {
          if (res.res.message) {
            self.toast(res.res.message);
          }
          if (res.res.code == 200) {
            list.imgList.push({
              file_url: res.res.data.file_url,
              type: 1
            }); 
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
  position: relative;
}

.order_top {
  background-color: #fff;
  width: 750px;
  flex-direction: row;
  align-items: flex-start;
  /* border-bottom-style: solid;
		border-bottom-color: #E8E8E8;
		border-bottom-width: 1px; */
  padding: 30px 32px;
}

.googPic {
  width: 116px;
  height: 116px;
  background-color: #f5f5f5;
}

.goods_info {
  padding-left: 30px;
  flex: 1;
}

.goods_title {
  font-size: 22px;
  line-height: 30px;
  color: #666666;
}

.goods_spec {
  padding-top: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.priceInfo {
  color: #666666;
  font-size: 20px;
}

.specInfo {
  color: #999999;
  font-size: 22px;
  /* background-color: #f2f22f; */
}

.selBox {
  width: 750px;
  padding: 15px 32px;
  background-color: #ffffff;
  margin-top: 20px;
}

.textarea {
  height: 250px;
  padding: 20px 0;
}

.imgBox {
  margin-bottom: 30px;
  flex-direction: row;
}

.clickPhoto {
  width: 63px;
  height: 63px;
  margin-right: 10px;
}

.reviewImg {
  background-color: #f5f5f5;
}

.sureBtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  position: absolute;
  bottom: 16px;
  left: 32px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.sureBtn:active {
  background-color: #000;
}
.star-box {
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
}
.image {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 14px;
}
</style>
